<template>
  <div class="code-edit-main">
    <code-mirror ref="codeMirror"></code-mirror>
    <div style="padding: 20px 0">
      <el-button @click="refresh">刷新</el-button>
      <el-button @click="setValue">回显赋值</el-button>
      <el-button @click="getValue">获取数据</el-button>
      <el-button @click="resetForm">清空</el-button>
    </div>
    <div>
      <el-input type="textarea" :rows="10" v-model="editData"></el-input>
    </div>
  </div>
</template>

<script>
/**
 * @Version 1.0.0
 * @Author DemoHui
 * @Date 2022/10/05
 */

// 引用刚刚写的codemirror.vue公共组件
import CodeMirror from "./components/CodeMirror";

export default {
  components: {
    CodeMirror,
  },
  data() {
    return {
      editData: "",
    };
  },
  methods: {
    // 刷新 （如果出现编辑器样式问题，以及不能初始化赋值回显数据，可以进行刷新操作）
    refresh() {
      this.$refs.codeMirror.refresh();
    },
    // 获取编辑器的值
    getValue() {
      this.editData = this.$refs.codeMirror.code;
    },
    // 回显赋值
    setValue() {
      this.$refs.codeMirror.setValue(
        "<template>\n" +
          '  <div class="code-edit-main">\n' +
          '    <code-mirror ref="codeMirror"></code-mirror>\n' +
          '    <div style="padding: 20px 0">\n' +
          '      <el-button @click="refresh">刷新</el-button>\n' +
          '      <el-button @click="setValue">回显赋值</el-button>\n' +
          '      <el-button @click="getValue">获取数据</el-button>\n' +
          "    </div>\n" +
          "    <div>\n" +
          '      <el-input type="textarea" :rows="5" v-model="editData"></el-input>\n' +
          "    </div>\n" +
          "  </div>\n" +
          "</template>"
      );
    },
    resetForm() {
      this.editData = "";
      this.$refs.codeMirror.setValue("");
    },
  },
};
</script>

<style>
.code-edit-main .CodeMirror {
  height: 500px;
}
</style>
<style lang="scss" scoped>
.code-edit-main {
  padding: 20px;
}
</style>
